<template>
    <div>
        <transition name="custom-classes-transition" enter-active-class="animated fadeInUpBig"
                    leave-active-class="animated fadeOutDownBig">
            <div @click.self="close" class="mu-mask" v-show="isShow">

                <div @click.self="close"
                     style="display: flex; justify-content: center; position: fixed; width:100%; bottom: 330px;">
                    <div class="pwd-layout">
                        <h3 style="height: 80px; vertical-align:middle;line-height: 80px;width: 100%;text-align: center;border-bottom:1px solid #d9d9d9;">
                            请输入支付密码</h3>
                        <h2 style="height: 80px;line-height: 80px; width: 100%;text-align: center; ">{{title}}</h2>
                        <div style="display:flex;position: relative;margin:0 auto;padding: 0 20px 20px 20px">
                            <div :class="{'pwd-layout-input-pwd': passwordArr[0]}" class="pwd-layout-input"></div>
                            <div :class="{'pwd-layout-input-pwd': passwordArr[1]}" class="pwd-layout-input"></div>
                            <div :class="{'pwd-layout-input-pwd': passwordArr[2]}" class="pwd-layout-input"></div>
                            <div :class="{'pwd-layout-input-pwd': passwordArr[3]}" class="pwd-layout-input"></div>
                            <div :class="{'pwd-layout-input-pwd': passwordArr[4]}" class="pwd-layout-input"></div>
                            <div style="border-right: 1px solid #b9b9b9;" :class="{'pwd-layout-input-pwd': passwordArr[5]}" class="pwd-layout-input"></div>
                        </div>
                    </div>
                </div>

                <div class="mu-input-control">
                    <div class="mu-input-control-hide"><i @click.self="close"
                                                          class="ion ion-ios-arrow-down mu-e-black-color"></i>
                    </div>
                    <div class="pwd-keyboard">
                        <div class="pwd-keyboard-button" v-for="item in 9" :key="item" @click="handle(item)">{{item}}
                        </div>
                        <div class="pwd-keyboard-button gray"></div>
                        <div class="pwd-keyboard-button" @click="handle('0')">0</div>
                        <div class="pwd-keyboard-button gray mu-e-black-color" @click="remove"><i
                            class="ion ion-backspace-outline"></i></div>
                    </div>
                </div>

            </div>
        </transition>
    </div>
</template>

<script>
    import 'animate.css'

    export default {

        name: 'mu-input-control',
        data: function () {
            return {
                passwordArr: [],
                currentValue: '',
                currentShow: false
            }
        },
        props: {
            value: [String, Number],
            isShow: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '请设置'
            }
        },
        created: function () {
            this.currentValue = this.value || ''
            this.currentShow = this.show
        },
        watch: {
            value: function (newVal, oldVal) {
                this.currentValue = newVal
            },
            currentValue: function (newVal, oldVal) {
                newVal !== oldVal && this.$emit('input', newVal)
            },
            show: function (newVal) {
                this.currentShow = newVal
            },
            currentShow: function (newVal) {
                this.$emit('update:show', newVal)
            }
        },
        methods: {
            close: function () {
                this.$emit('update:isShow', false)
            },
            handle: function (val) {

                if (this.passwordArr.length < 6) {
                    this.passwordArr.push(val)
                }

                if (this.passwordArr.length === 6) {
                    this.$emit('update:isShow', false)
                    this.$emit('pwdDone', this.passwordArr.join(''))
                    this.passwordArr = []
                }

            },
            remove: function () {
                this.passwordArr.pop()
            },
            hide: function () {
                this.currentShow = false
                this.$emit('on-hide')
            }
        }
    }

</script>

<style>
    .pwd-layout-input {
        height: 40px;
        top: 1px;
        border: 1px solid #b9b9b9;
        border-right: 0;
        width: 40px;
    }

    .pwd-layout-input-pwd {
        background-image: url('../../../../assets/circle.png');
        background-repeat: no-repeat;
        background-position: center;
    }

    .pwd-layout {
        border-radius: 5px;
        align-items: center;
        background-color: white;
        flex-flow: column;
        border: 1px #d9d9d9 solid;
        display: flex;
        justify-content: center;
    }

    .pwd-keyboard {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        border-right: 1px solid #ebebeb;
        border-top: 1px solid #ebebeb;
    }

    .pwd-keyboard .pwd-keyboard-button {
        flex-grow: 1;
        border: 1px solid #ebebeb;
        width: 30%;
        display: block;
        height: 60px;
        border-top: 0px;
        border-right: 0px;
        background-color: white;
        line-height: 60px;
        text-align: center;
    }

    .pwd-keyboard .gray {
        background: #dfdfdf;
    }

    .pwd-keyboard .pwd-keyboard-button:active {
        background-color: #ececec;
    }
</style>
